<style type="text/css" >
    .shortcuts li .shortcuts-icon {
        width: auto;
        font-size: 40px;
        font-weight: bolder;
        text-align: center;
        padding: 40px 20px 0px;
    }
</style>
<div class="row-fluid">
    <div id="dashboard-left" class="span8">

        <h5 class="subtitle">Applicants Status Count</h5>
        <ul class="shortcuts">
            <li class="events">
                <a href="#">
                    <span class="shortcuts-icon"><?php echo $report['credit_bal']; ?></span>
                    <span class="shortcuts-label">Credit Balance</span>
                </a>
            </li>
            <li class="products">
                <a href="#">
                    <span class="shortcuts-icon"><?php echo $report['contacts_total']; ?></span>
                    <span class="shortcuts-label">Total Contacts</span>
                </a>
            </li>
            <li class="archive">
                <a href="#">
                    <span class="shortcuts-icon"><?php echo $report['contact_group_total']; ?></span>
                    <span class="shortcuts-label">Total Group Contacts</span>
                </a>
            </li>
            <li class="archive">
                <a href="#">
                    <span class="shortcuts-icon"><?php echo $report['delivered_total']; ?></span>
                    <span class="shortcuts-label">SMS Delivered <?php echo $year_month_format; ?></span>
                </a>
            </li>
            <li class="archive">
                <a href="#">
                    <span class="shortcuts-icon"><?php echo $report['pending_total']; ?></span>
                    <span class="shortcuts-label">SMS Pending <?php echo $year_month_format; ?></span>
                </a>
            </li>
        </ul>

        <br />


    </div><!--span8-->

    <div id="dashboard-right" class="span4">

        <h5 class="subtitle">Announcements</h5>

        <div class="divider15"></div>

        <div class="alert alert-block">
        <!-- <button data-dismiss="alert" class="close" type="button">&times;</button>-->
            <h4>Notice</h4>
            <p style="margin: 8px 0">
                Contact and SMS Template files can be downloaded at the top link 'Download Resources'.
            </p>
            <p style="margin: 8px 0">
                You can only edit your scheduled SMS with 5min and greater time.
            </p>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div  class="span8">
        <div class="widgetbox" id="widget_stats">
            <div class="headtitle">
                <h4 class="widgettitle">SMS Statistics</h4>
            </div>
            <div class="widgetcontent">
                <style type="text/css">
                    .highcharts-container{
                        width: inherit !important;
                    }
                </style>
                <div id="chart_content"></div>

                <script type="application/javascript">
                    var x_axis = <?php echo json_encode($graph['x-axis']) ; ?>;
                    var y_axis =  <?php echo json_encode($graph['data']) ; ?>;
                    var year =  <?php echo json_encode($year) ; ?>;
                    $(function () {
                        $('#chart_content').highcharts({
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: 'SMS Delivered,Pending Per Month For Year '+year
                            },
                            xAxis: {
                                categories: x_axis
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Total Processed'
                                },
                                stackLabels: {
                                    enabled: true,
                                    style: {
                                        fontWeight: 'bold',
                                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                                    }
                                }
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.x + '</b><br/>' +
                                        this.series.name + ': ' + this.y + '<br/>' +
                                        'Total: ' + this.point.stackTotal;
                                }
                            },
                            plotOptions: {
                                column: {
                                    stacking: 'normal',
                                    dataLabels: {
                                        enabled: true,
                                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                                        style: {
                                            textShadow: '0 0 3px black, 0 0 3px black'
                                        }
                                    }
                                }
                            },
                            series: y_axis,
                            credits: {
                                enabled: false
                            }
                        });
                    });
                </script>

            </div>
        </div>
    </div>

    <div class="span4">

        <h5 class="tabtitle">Supported Countries And Operators For SMS</h5>

        <div id="scroll1" class="mousescroll">
            <ul class="userlist">
                <?php foreach($country_operators as $cop) {?>
                    <li>
                        <div>
                            <div class="uinfo" style="margin-left: 0px;">
                                <h5><?php echo $cop['country'] ?></h5>
                                <span class="pos">Operators</span>
                                <span><?php echo $cop['operators'] ?></span>
                            </div>
                        </div>
                    </li>
                <?php }?>
            </ul>
        </div><!--#scroll1-->

        <br />

        <h3>FAQ</h3>
        <br />
        <ul id="slidercontent">
            <?php foreach($faqs as $faq) {?>
            <li>
                <div class="slide_wrap">
                    <div class="slide_content" style="margin-left: 0px;">
                        <h4><a href="javascript:void(0);"><?php echo $faq['Faq']['question'] ?></a></h4>
                        <p>
                            <?php echo $faq['Faq']['answer'] ?>
                        </p>
                    </div>
                </div>
            </li>
            <?php }?>
        </ul>

    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        //content slider
        jQuery('#slidercontent').bxSlider({
            prevText: '',
            nextText: ''
        });

        //slim scroll
        jQuery('#scroll1').slimscroll({
            color: '#666',
            size: '10px',
            width: 'auto',
            height: '208px'
        });
    });
</script>
